<template>
  <div>
    <div id="itemadd_container">
      <p>商品添加</p>

      <div class="itemadd_input">
        <span>商品名称</span>
        <el-input v-model="itemname" style="width: 300px"></el-input>
      </div>

      <div class="itemadd_input">
        <span>商品分类</span>
        <el-select v-model="type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.cateName"
            :label="item.cateName"
            :value="item.cateName"
          >
          </el-option>
        </el-select>
      </div>

      <div class="itemadd_input">
        <span>商品价格</span>
        <el-input-number v-model="num" :min="1" :max="10000"></el-input-number>
      </div>

      <div class="itemadd_input">
        <span>商品图片</span>
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/goods/goods_img_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div class="itemadd_input">
        <span>商品描述</span>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textareaval"
          style="width: 300px"
        >
          >
        </el-input>
      </div>

      <el-button @click="clickadd" class="itemaddBtn" type="primary"
        >添加商品</el-button
      >
    </div>
  </div>
</template>

<script>
import { categories, addgoods } from "@/apis/items";
export default {
  data() {
    return {
      itemname: "", //商品名称
      options: [], //分类名
      type: "", //分类的值
      num: 0, //价格
      imageUrl: "", //回显的本地图片
      textareaval: "", //文本框值
    };
  },

  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.newimg = res.imgUrl; //图片上传成功后重新命名的名字
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    //添加商品
    clickadd() {
      addgoods({
        name: this.itemname,
        category: this.type,
        price: this.num,
        imgUrl: this.newimg,
        goodsDesc: this.textareaval,
      }).then((res) => {
        console.log(res);
        this.$message({
          message: "添加成功",
          type: "success",
        });
      });
    },
  },

  created() {
    categories().then((res) => {
      console.log(res.data.categories);
      this.options = res.data.categories;
    });
  },
};
</script>

<style lang="less" scoped>
#itemadd_container {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
  p {
    line-height: 50px;
    border-bottom: 1px solid #f4f5f9;
    padding: 0 20px;
    color: #848485;
    margin-bottom: 20px;
  }
  .itemadd_input {
    display: flex;
    align-items: center;
    margin: 0 0 20px 20px;
    span {
      margin-right: 20px;
    }
  }
  .itemaddBtn {
    margin-left: 100px;
  }

  .avatar-uploader,
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>